<template>
	<view class="container">
		<view style="background:#fff;border-radius:16rpx;padding:0 30rpx;">
			<u--form :labelStyle="{color:'#333333',fontSize:'30rpx'}" :model="form" :rules="rules" ref="uForm"
				labelWidth="auto" labelAlign="left">
				<u-form-item label="姓名:" prop="name" borderBottom required>
					<u--input v-model="form.name" border="none" placeholder="输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="手机号:" prop="phone" borderBottom required>
					<u--input v-model="form.phone" border="none" placeholder="输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="备注:" prop="remark">
					<u--input v-model="form.remark" border="none" placeholder="输入备注"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="lounge-tips">
			<view class="lounge-tips-title">注意事项</view>
			<view class="lounge-tips-desc">
				<rich-text style="line-height: 1.8;" :nodes="rich_html"></rich-text>
			</view>
		</view>

		<view class="footer">
			<view class="submit" @click="submit">{{submit_loading?'处理中...':'提交'}}</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	import {
		imgUrl
	} from '../../utils/global';
	import {
		addcx,
		getcxintroduce
	} from "@/api/travel"
	import {
		useUserStore
	} from '@/store/user';
	const userStore = useUserStore();
	const type=ref("")
	const rich_html=ref("")
	onLoad(async (options) => {
		type.value=options.type
		let title=""
		if(options.type=="E0807000001"){
			title="休息室服务"
		}else if(options.type=="E0807000002"){
			title="机场贵宾服务"
		}else if(options.type=="E0807000003"){
			title="礼宾车接送服务"
		}else if(options.type=="E0907003001"){
			title="境内机场高铁休息室服务"
		}else if(options.type=="E0907003002"){
			title="境外机场休息室"
		}else if(options.type=="E0907003003"){
			title="境内接送机站服务"
		}else if(options.type=="E0907003004"){
			title="贵宾要客通服务"
		}else{
			title="出行服务"
		}
		uni.setNavigationBarTitle({
			title
		})
		getCxintro()
	})
	const getCxintro=()=>{
		getcxintroduce().then(res=>{
			let list=res[0]
			rich_html.value=list.find(item=>item.type==type.value)?.description
		})
	}
	const submit_loading = ref(false)
	const uForm = ref()
	// 提交表单
	const submit = () => {
		if(!type.value) {
			uni.$u.toast("缺少类型信息")
			return
		}
		if (submit_loading.value) return
		let form_save = JSON.parse(JSON.stringify(form.value))
		uForm.value.validate().then(res => {
			submit_loading.value = true
			form_save.uid = userStore.userInfo.id
			form_save.type = type.value
			addcx(form_save).then(res => {
				submit_loading.value = false
				uni.$u.toast('提交成功')
				uForm.value.resetFields()
				setTimeout(() => {
					uni.redirectTo({
						url:"/pages/travel/list"
					})
				}, 1000)
			}).catch(() => {
				submit_loading.value = false
			})
		}).catch(errors => {
			console.log(errors)
			uni.$u.toast(errors[0].message)
		})
	}
	const form = ref({
		name: "", //姓名 可空
		phone: "", //手机号 可空
		remark:"", //备注 可空
		uid: "",
		price:0.01
	})
	const rules = ref({
		'name': {
			type: 'string',
			max: 20,
			required: true,
			message: '姓名不能为空',
			trigger: ['blur', 'change']
		},
		'phone': [{
			type: 'string',
			max: 20,
			required: true,
			message: '手机号不能为空',
			trigger: ['blur', 'change']
		},
		{
			pattern: '^1[3-9]\\d{9}$',
			// 正则检验前先将值转为字符串
			transform(value) {
				return String(value);
			},
			message: '手机号格式不正确'
		},],
	})
</script>

<style scoped lang="scss">
	.container {
		background: #F8F8FA;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.lounge-tips-title {
		color: #333333;
		font-size: 32rpx;
		margin: 30rpx 0;
		font-weight: 700;
	}

	.lounge-tips-desc {
		color: #B6B6B8;
		font-size: 26rpx;
		white-space: pre-wrap;
	}

	.footer {
		position: fixed;
		bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		left: 30rpx;
		right: 30rpx;
	}

	.submit {
		/* height: 80rpx; */
		padding: 20rpx;
		background: linear-gradient(180deg, #FF7F36 0%, #F54730 100%);
		text-align: center;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>